<template>
	<view class="page" :class="pageClass" :style="customStyle">
		<!-- 顶部状态栏 -->
		<sl-statusbar :useBack="navbarBack" @navbar:backPage="onNavbar" v-if="openStatusbar" />
		<!-- 顶部标题导航 -->
		<sl-navbar :title="title" :fixed="navbarFixed" :useBack="navbarBack" :backgroundColor="navbarBackgroundColor"
			:isIconfont="navbarIsIconfont" :backImage="navbarBackImage" :backImageSize="navbarBackImageSize"
			:backImageColor="navbarBackImageColor" @navbar:backPage="onNavbar" v-if="isDisplay">
			<!-- 导航栏顶部内容 -->
			<slot name="top"></slot>
		</sl-navbar>
		<!-- 正文内容 -->
		<slot></slot>
		<view class="page__safe--actions" v-if="safeBottom && $slots.actions">
			<!-- 安全区域 -->
			<slot name="actions"></slot>
		</view>
		<!-- 安全区域 -->
		<slot name="actions" v-else-if="$slots.actions"></slot>
	</view>
</template>

<script>
	import * as Util from '@/utils/index.js';
	//导航栏组件，主要用于头部导航，依赖于uni-ui的uni-nav-bar（带安全区域封装）
	//@group 全局组件
	export default {
		//
		name: 'page',
		//
		props: {
			// 是否显示状态栏
			openStatusbar: {
				type: Boolean,
				default: false,
			},
			//是否显示导航栏组件
			isDisplay: {
				type: Boolean,
				default: true,
			},
			//是否开启底部安全区域，默认开启
			safeBottom: {
				type: Boolean,
				default: true,
			},
			//自定义sl-page页面样式
			customClass: {
				type: [Array, String],
			},
			//自定义sl-page页面样式
			customStyle: {
				type: String,
				default: ''
			},
			//自定义点击返回按钮后的返回页面，默认返回上一级
			navbarBackPage: {
				type: String,
				default: 'navigate:back',
			},
			//导航栏标题，sl-navbar组件属性
			title: {
				type: String,
				default: ''
			},
			//是否固定顶部，sl-navbar组件属性，默认固定
			navbarFixed: {
				type: Boolean,
				default: true,
			},
			//是否使用返回，sl-navbar组件属性，默认使用
			navbarBack: {
				type: Boolean,
				default: true,
			},
			//导航栏背景色，sl-navbar组件属性，默认白色
			navbarBackgroundColor: {
				type: String,
				default: 'transparent'
			},
			//导航栏是否使用阿里图标库，sl-navbar组件属性，默认不适用
			navbarIsIconfont: {
				type: Boolean,
				default: false
			},
			//导航栏自定义返回图标，只支持阿里图标库，传名字即可，sl-navbar组件属性，默认left，只有在navbarIsIconfont等于true时有效
			navbarBackImage: {
				type: String,
				default: 'left'
			},
			//导航栏自定义返回图标大小，只支持阿里图标库，传大小即可，sl-navbar组件属性，默认18，只有在navbarIsIconfont等于true时有效
			navbarBackImageSize: {
				type: [String, Number],
				default: 18
			},
			//导航栏自定义返回图标颜色，只支持阿里图标库，传颜色值16进制即可，sl-navbar组件属性，默认#666，只有在navbarIsIconfont等于true时有效
			navbarBackImageColor: {
				type: String,
				default: '#666'
			},
		},
		//
		computed: {
			pageClass: function() {
				let pageClass = [];
				if (this.safeBottom && !this.$slots.actions) {
					pageClass.push('page__safe--bottom')
				}
				if (!Util.isEmpty(this.customClass) && Util.isArray(this.customClass)) {
					pageClass = pageClass.concat(this.customClass)
				} else if (!Util.isEmpty(this.customClass)) {
					pageClass.push(this.customClass);
				}
				pageClass = pageClass.concat(Util.isArray(this.customClass) ? this.customClass : [this.customClass]
					.filter(Boolean));
				return pageClass;
			}
		},
		methods: {
			onNavbar: function() {
				// 优先处理通过设置回退地址
				if (this.navbarBackPage === 'navigate:back') {
					this.$app.backPage();
				}
				// 优先处理通过设置回退地址
				else if (this.navbarBackPage) {
					this.$app.redirectTo(this.navbarBackPage)
				}
				// 如果没有设置在自行处理
				else {
					//点击回退按钮的回调
					//@arg 向父组件传递已经点击，参数为布尔值，值为true）
					this.$emit('navbar:backPage', true)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		background-color: $uni-bg-color-grey;
		width: 100%;
		min-height: 100vh;

		.page__safe--actions {
			z-index: 2;
			position: relative;
			padding-bottom: 0 !important;
			padding-bottom: constant(safe-area-inset-bottom) !important;
			padding-bottom: env(safe-area-inset-bottom) !important;

			/deep/ .page__actions {
				box-shadow: none;
			}
		}

		&.page__safe--bottom {
			padding-bottom: 0 !important;
			padding-bottom: constant(safe-area-inset-bottom) !important;
			padding-bottom: env(safe-area-inset-bottom) !important;
		}
	}
</style>